<template>
  <van-form
    ref="formRef"
    :label-width="labelWidth"
    :label-align="labelAlign"
    :input-align="inputAlign"
    :error-message-align="errorMessageAlign"
    :validate-trigger="validateTrigger"
    :colon="colon"
    :disabled="disabled"
    :readonly="readonly"
    :required="required"
    :show-error="showError"
    :show-error-message="showErrorMessage"
    :submit-on-enter="submitOnEnter"
    @submit="handleSubmit"
    @failed="handleFailed"
  >
    <slot />
    
    <!-- 表单操作按钮 -->
    <div v-if="showActions" class="base-form__actions">
      <van-button
        v-if="showResetButton"
        :loading="resetLoading"
        :disabled="disabled"
        @click="handleReset"
      >
        {{ resetButtonText }}
      </van-button>
      <van-button
        v-if="showSubmitButton"
        type="primary"
        :loading="submitLoading"
        :disabled="disabled"
        native-type="submit"
      >
        {{ submitButtonText }}
      </van-button>
    </div>
  </van-form>
</template>

<script>
import { ref, defineComponent } from 'vue'

export default defineComponent({
  name: 'BaseForm',
  props: {
    /**
     * 表单数据
     */
    modelValue: {
      type: Object,
      default: () => ({})
    },
    /**
     * 表单验证规则
     */
    rules: {
      type: Object,
      default: () => ({})
    },
    /**
     * 标签宽度
     */
    labelWidth: {
      type: [Number, String],
      default: '6.2em'
    },
    /**
     * 标签对齐方式
     */
    labelAlign: {
      type: String,
      default: 'left',
      validator: (value) => ['left', 'center', 'right'].includes(value)
    },
    /**
     * 输入框对齐方式
     */
    inputAlign: {
      type: String,
      default: 'left',
      validator: (value) => ['left', 'center', 'right'].includes(value)
    },
    /**
     * 错误提示对齐方式
     */
    errorMessageAlign: {
      type: String,
      default: 'left',
      validator: (value) => ['left', 'center', 'right'].includes(value)
    },
    /**
     * 表单校验触发时机
     */
    validateTrigger: {
      type: [String, Array],
      default: 'onBlur'
    },
    /**
     * 是否在 label 后面添加冒号
     */
    colon: {
      type: Boolean,
      default: false
    },
    /**
     * 是否禁用表单
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 是否为只读状态
     */
    readonly: {
      type: Boolean,
      default: false
    },
    /**
     * 是否显示必填字段的标记
     */
    required: {
      type: Boolean,
      default: true
    },
    /**
     * 是否标记输入内容校验不通过的字段
     */
    showError: {
      type: Boolean,
      default: true
    },
    /**
     * 是否在校验不通过时显示错误提示
     */
    showErrorMessage: {
      type: Boolean,
      default: true
    },
    /**
     * 是否在按下回车键时提交表单
     */
    submitOnEnter: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示操作按钮
     */
    showActions: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示重置按钮
     */
    showResetButton: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示提交按钮
     */
    showSubmitButton: {
      type: Boolean,
      default: true
    },
    /**
     * 重置按钮文本
     */
    resetButtonText: {
      type: String,
      default: '重置'
    },
    /**
     * 提交按钮文本
     */
    submitButtonText: {
      type: String,
      default: '提交'
    },
    /**
     * 提交按钮加载状态
     */
    submitLoading: {
      type: Boolean,
      default: false
    },
    /**
     * 重置按钮加载状态
     */
    resetLoading: {
      type: Boolean,
      default: false
    },
    /**
     * 表单布局
     */
    layout: {
      type: String,
      default: 'vertical',
      validator: (value) => ['horizontal', 'vertical', 'inline'].includes(value)
    },
    /**
     * 表单尺寸
     */
    size: {
      type: String,
      default: 'normal',
      validator: (value) => ['large', 'normal', 'small'].includes(value)
    }
  },
  emits: ['update:modelValue', 'submit', 'reset', 'validate', 'failed'],
  setup(props, { emit }) {
    const formRef = ref(null)

    /**
     * 表单提交处理
     */
    const handleSubmit = (values) => {
      emit('submit', values)
    }

    /**
     * 表单验证失败处理
     */
    const handleFailed = (errorInfo) => {
      emit('failed', errorInfo)
    }

    /**
     * 重置表单
     */
    const handleReset = () => {
      formRef.value?.resetValidation()
      emit('reset')
    }

    /**
     * 验证表单
     */
    const validate = (name) => {
      return formRef.value?.validate(name)
    }

    /**
     * 验证指定字段
     */
    const validateField = (name) => {
      return formRef.value?.validateField(name)
    }

    /**
     * 重置验证
     */
    const resetValidation = (name) => {
      formRef.value?.resetValidation(name)
    }

    /**
     * 滚动到错误字段
     */
    const scrollToField = (name) => {
      formRef.value?.scrollToField(name)
    }

    /**
     * 获取所有字段名
     */
    const getFieldNames = () => {
      return Object.keys(props.rules)
    }

    /**
     * 获取字段值
     */
    const getFieldValue = (name) => {
      return props.modelValue[name]
    }

    /**
     * 设置字段值
     */
    const setFieldValue = (name, value) => {
      const newValue = { ...props.modelValue }
      newValue[name] = value
      emit('update:modelValue', newValue)
    }

    /**
     * 获取字段错误信息
     */
    const getFieldError = (name) => {
      // 这里可以实现获取字段错误信息的逻辑
      return null
    }

    /**
     * 清除字段错误信息
     */
    const clearFieldError = (name) => {
      // 这里可以实现清除字段错误信息的逻辑
    }

    return {
      formRef,
      handleSubmit,
      handleFailed,
      handleReset,
      validate,
      validateField,
      resetValidation,
      scrollToField,
      getFieldNames,
      getFieldValue,
      setFieldValue,
      getFieldError,
      clearFieldError
    }
  }
})
</script>

<style lang="scss" scoped>
.base-form {
  &__actions {
    display: flex;
    gap: 16px;
    padding: 16px;
    margin-top: 24px;

    .van-button {
      flex: 1;
    }
  }

  // 水平布局
  &--horizontal {
    .van-field {
      display: flex;
      align-items: center;

      .van-field__label {
        flex-shrink: 0;
      }

      .van-field__body {
        flex: 1;
      }
    }
  }

  // 垂直布局
  &--vertical {
    .van-field {
      .van-field__label {
        display: block;
        margin-bottom: 8px;
      }

      .van-field__body {
        width: 100%;
      }
    }
  }

  // 内联布局
  &--inline {
    .van-field {
      display: inline-flex;
      align-items: center;
      margin-right: 16px;
      margin-bottom: 16px;

      .van-field__label {
        margin-right: 8px;
      }
    }
  }

  // 尺寸
  &--large {
    .van-field {
      .van-field__control {
        height: 50px;
        font-size: 16px;
      }
    }
  }

  &--small {
    .van-field {
      .van-field__control {
        height: 32px;
        font-size: 12px;
      }
    }
  }
}

// 全局样式覆盖
:global(.van-form) {
  .van-field {
    padding: 12px 16px;
    background-color: #fff;
    border-bottom: 1px solid #ebedf0;

    &:last-child {
      border-bottom: none;
    }

    .van-field__label {
      color: #646566;
      font-size: 14px;
      line-height: 24px;
    }

    .van-field__control {
      color: #323233;
      font-size: 14px;
      line-height: 24px;

      &::placeholder {
        color: #c8c9cc;
      }

      &:disabled {
        color: #c8c9cc;
        background-color: transparent;
      }
    }

    .van-field__error-message {
      color: #ee0a24;
      font-size: 12px;
      line-height: 18px;
      text-align: left;
    }

    .van-field__word-limit {
      color: #646566;
      font-size: 12px;
      line-height: 18px;
      text-align: right;
    }

    // 必填标记
    &.van-field--required {
      .van-field__label::before {
        position: relative;
        margin-right: 4px;
        color: #ee0a24;
        content: '*';
      }
    }

    // 错误状态
    &.van-field--error {
      .van-field__control {
        color: #ee0a24;
        border-color: #ee0a24;
      }
    }

    // 禁用状态
    &.van-field--disabled {
      .van-field__label,
      .van-field__control {
        color: #c8c9cc;
      }
    }
  }
}
</style>